<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {% block meta %}
  <!-- block meta  -->{% endblock %}
  <!-- favicon -->
  <!-- favicon -->
  {% if static_url %}
  <link rel="shortcut icon" href="{{ static_url }}/app/favicon.ico">
  {% else %}
  <link rel="shortcut icon" href="">
  {% endif %}
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="{{ static_url }}/bootstrap-4.5.0/css/bootstrap.css">
  <link rel="stylesheet" href="{{ static_url }}/font-awesome-4.7.0/css/font-awesome.css">
  <!-- Bootstrap 开关按钮 -->
  <link href="{{ static_url }}/bootstrap4-toggle-3.6.1/css/bootstrap4-toggle.css" rel="stylesheet">
  <link href="{{ static_url }}/app/app.css" rel="stylesheet">
  <title>{% block title %} ? {% endblock %} | Website</title>
  <style>
    body {
      background-image: url('{{ static_url }}/app/leimu.jpg');
      overflow-y: overlay;
    }

    body,
    wrapper {
      min-height: 100vh;
    }

    .flex-fill {
      flex: 1 1 auto;
    }

    main>.container {
      padding: 5px 15px 0;
    }

    .footer {
      background-color: #f5f5f5;
      padding: 15px;
      color: #444;
      border-top: 1px solid #d2d6de;
    }

    .footer>.container {
      padding-right: 15px;
      padding-left: 15px;
    }

    code {
      font-size: 80%;
    }

    /***
        Styles below are only required if you're using <iframe> fallback in
        addition to HTML5 drag & drop (only working in Firefox/Chrome/Opera 15+).
      ***/

    /* Essential FileDrop zone element configuration: */
    .fd-zone {
      position: relative;
      overflow: hidden;
      /* The following are not required but create a pretty box: */
      width: 15em;
      margin: 0 auto;
      text-align: center;
    }

    /* Hides <input type="file"> while simulating "Browse" button: */
    .fd-file {
      opacity: 0;
      font-size: 118px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      padding: 0;
      margin: 0;
      cursor: pointer;
      filter: alpha(opacity=0);
      font-family: sans-serif;
    }

    /* Provides visible feedback when user drags a file over the drop zone: */
    .fd-zone.over {
      border-color: maroon;
      background: #eee;
    }
  </style>
  {% block beforehead %}
  <!-- before head  -->{% endblock %}
</head>

<body>
  <wrapper class="d-flex flex-column">
    <!--header-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/">Website</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
        aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="/blogs">日志 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/users">用户</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="/tools" id="tools" role="button" tabindex="-1"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">工具</a>
            <div class="dropdown-menu" aria-labelledby="tools">
              {% for item in views %}
              <a class="dropdown-item" href="/{{ item }}">{{ item }}</a>
              {% endfor %}
            </div>
          </li>
        </ul>
        <div class="mr-5 d-flex justify-content-end align-items-center dropdown">
          {% if __user__ %}
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">{{ __user__.name }}</a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="/logout">logout</a>
          </div>
          {% else %}
          <a class="btn btn-sm btn-outline-secondary mr-3" href="/register">注册</a>
          <a class="btn btn-sm btn-outline-secondary mr-3" href="/login">登录</a>
          {% endif %}
        </div>
      </div>
    </nav>
    <!--header-->
    <!-- content -->
    <main class="flex-fill">
      {% block content %}
      {% endblock %}
    </main>
    <!-- // content -->
    <!--footer-->
    <footer class="footer">
      <div class="pull-right hidden-xs">
        <b>Version</b> 1.0.0
      </div>
      <strong>Copyright &copy; 2018-2020 <a href="#">Shadaileng Studio</a>.</strong> All rights
      reserved.
    </footer>
    <!--footer-->
  </wrapper>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="{{ static_url }}/jquery-3.4.1/jquery-3.4.1.js"></script>
  <script src="{{ static_url }}/popper-core-1.16.1/popper.js"></script>
  <script src="{{ static_url }}/bootstrap-4.5.0/js/bootstrap.js"></script>
  <script src="{{ static_url }}/axios-0.19.2/axios.js"></script>
  <script src="{{ static_url }}/js-sha1-0.6.0/sha1.js"></script>
  <script src="{{ static_url }}/app/filedrop.js"></script>
  <script src="{{ static_url }}/hls-0.14.0/hls.js"></script>
  <script src="{{ static_url }}/clappr-0.3.13/clappr.js"></script>
  <!-- Bootstrap 开关按钮 -->
  <script src="{{ static_url }}/bootstrap4-toggle-3.6.1/js/bootstrap4-toggle.js"></script>
  <script>
    function get_cookie(name) {
      let cookies = []
      if (document.cookie.indexOf(';') >= 0) {
        cookies = document.cookie.split(';')
      } else {
        cookies.push(document.cookie)
      }
      for (index in cookies) {
        let parea = cookies[index].split('=')
        if (parea[0].trim() === name) return unescape(parea[1])
      }
      return null
    }
    function set_cookie(name, value) {
      // cookie = document.cookie
      // if (cookie.length > 0) {
      //     cookie += ';' 
      // }
      cookie = ''
      cookie += name + '=' + escape(value)
      document.cookie = cookie
    }
    let scroll = get_cookie('scroll')
    if (scroll) {
      document.querySelector('html').scrollTo(0, Number(scroll))
    }
    window.onscroll = function (event) {
      set_cookie('scroll', document.querySelector('html').scrollTop)
    }
  </script>
  {% block beforebody %}
  <!-- before body  -->{% endblock %}
</body>

</html>